<template>
    <!--顶部-->
    <div class="sidebar-top">
       <div>实验室成果管理系统</div>
       <div>退出</div>
    </div>
    <div class="sidebar-cont">
        <el-menu :default-active="ac_index" @select="Select">
            <div v-for="(item,index) in menu" :key="index">
            <el-menu-item v-if="item.Subclass.length == 0" :index="item.id">
                {{ item.title }}
            </el-menu-item>
            <el-sub-menu v-if="item.Subclass.length > 0" :index="item.id">
                <template #title>
                    {{ item.title }}   
                </template>
                    <div v-for="(two,index_two) in item.Subclass" :key="index_two">
                    <el-menu-item :index="two.id">{{ two.title }}</el-menu-item>
                    </div>
            </el-sub-menu>
        </div>
        </el-menu>
    </div>
   <router-view></router-view>
</template>
<script>
import {} from '@element-plus/icons-vue'
import {reactive,ref,onMounted} from 'vue'
export default{
    setup(){
        const Array =[
            {
                id:'1',
                title:'用户列表',
                router:'',
                Subclass:[]//二级菜单
            },
            {
                id:'2',
                title:'软件著作权',
                router:'',
                Subclass:[]//二级菜单
            },
            {
                id:'3',
                title:'获奖成果',
                router:'',
                Subclass:[]//二级菜单
            },
            {
                id:'4',
                title:'成果鉴定',
                router:'',
                Subclass:[]//二级菜单
            },
            {
                id:'5',
                title:'人员管理',
                router:'',
                Subclass:[
                    {
                        id:'5-1',
                        title:'添加信息',
                        router:'',
                    },
                    {
                        id:'5-2',
                        title:'删除信息',
                        router:'',
                    },
                ]//二级菜单
            },
        ]
        const menu = reactive(Array)
        //菜单激活回调
        const ac_index = ref('1')
        function Select(index,path){
           localStorage.setItem('menuid',JSON.stringify(index))
        }
        onMounted(()=>{
            ac_index.value = JSON.parse(localStorage.getItem('menuid'))
        })
        return {menu,ac_index,Select}
    }
}
</script>
<style>
</style>